<template>
	<div class="web">
		<!--头部导航-->
		<myNav></myNav>
		<!--中间内容-->
		<transition name="fade">
			<router-view :cur_play="cur_play" :cur_hot="cur_hot"></router-view>
		</transition>
		<!--侧边栏-->
		<transition enter-active-class=" animated bounceInLeft" leave-active-class="animated flipOutX">
			<sideBar v-show="isShowSide"></sideBar>
		</transition>
	</div>
</template>

<script>
	import myNav from "./myNav.vue";
	import axios from "axios";
	import sideBar from "./sideBar.vue";
	export default { //输出默认值
		name: "App",
		data() {
			return {
				cur_play: [],
				cur_hot:[],
//				isShowSide:false,
			}
		},
		components:{
			myNav,sideBar,
		},
		computed:{
			isShowSide:function(){
				return this.$store.state.isShowSide;
			}
		},
		created() {
			axios.get("http://m.maizuo.com/v4/api/film/now-playing").then((res) => {
				this.cur_play = res.data.data.films
			}),
			axios.get("http://m.maizuo.com/v4/api/film/coming-soon").then((res) => {
				this.cur_hot = res.data.data.films
			})
		}
	}
</script>

<style>
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity .3s
	}
	
	.fade-enter,
	.fade-leave-active {
		opacity: 0
	}
</style>